<template>
  <div style="padding:0 20px">
    <div class="jiaoyi">
      <el-row style="margin-bottom:20px">
        <el-col :span="6" style="font-size:18px; padding:10px">
          交易统计
          <i class="ivu-icon ivu-icon-ios-information-circle-outline"></i>
        </el-col>
      </el-row>
      <div>
        <div>
          <el-row>
            <el-col :span="12" style="border-right:1px #ccc solid">
              <div>
                <p style="font-size:16px;padding:10px 0">{{ leftname }}：¥{{ leftmoney }}</p>
                <!-- <p style="font-size:14px;padding:10px 0"></p> -->
                <echarts-from
                  ref="visitChart"
                  :yAxisData="yAxisData"
                  :seriesData="series"
                  :xAxis="xAxis"
                  v-if="info"
                  :legendData="legendData"
                ></echarts-from>
              </div>
            </el-col>
            <el-col :span="5" style="margin-left:20px">
              <div>
                <p style="font-size:16px;padding:10px 0">{{ rightdata.name }} <span style="font-size:18px">{{rightdata.nowNum}}</span></p>
                <p style="font-size:14px;padding:10px 0">昨日:{{rightdata.lastNum}}
                  日环比:<i class="content-is" :class="Number(dinghuan)>=0?'up':'down'"> {{ dinghuan}}%</i><i :class="Number(dinghuan)>=0?'el-icon-caret-top':'el-icon-caret-bottom'" />
                </p>
                <echarts-from2
                  ref="visitChart"
                  :yAxisData="yAxisData2"
                  :seriesData="series2"
                  :xAxis="xAxis"
                  :legendData="legendData2"
                  style="height:200px"
                ></echarts-from2>
                <p style="font-size:16px;padding:10px 0">{{ rightname.name }} <span style="font-size:18px">{{rightname.nowNum}}</span></p>
                <p style="font-size:14px;padding:10px 0">上月:{{rightname.lastNum}}
                  月环比:<i class="content-is" :class="Number(dinghuanyue)>=0?'up':'down'"> {{ dinghuanyue}}%</i><i :class="Number(dinghuanyue)>=0?'el-icon-caret-top':'el-icon-caret-bottom'" />
                </p>
              </div>
            </el-col>
            <el-col :span="5" style="margin-left:20px">
              <div>
                <p style="font-size:16px;padding:10px 0">{{ rightdata2.name }} <span style="font-size:18px">{{rightdata2.nowNum}}</span></p>
                <p style="font-size:14px;padding:10px 0">昨日:{{rightdata2.lastNum}}
                  月环比:<i class="content-is" :class="Number(fuhuan)>=0?'up':'down'"> {{ fuhuan}}%</i><i :class="Number(fuhuan)>=0?'el-icon-caret-top':'el-icon-caret-bottom'" />
                </p>
                <echarts-from2
                  ref="visitChart"
                  :yAxisData="yAxisData2"
                  :seriesData="series3"
                  :xAxis="xAxis"
                  :legendData="legendData3"
                  style="height:200px"
                ></echarts-from2>
                <p style="font-size:16px;padding:10px 0">{{ rightname2.name }} <span style="font-size:18px">{{rightname2.nowNum}}</span></p>
                <p style="font-size:14px;padding:10px 0">上月:{{rightname2.lastNum}}
                  日环比:<i class="content-is" :class="Number(fuhuanyue)>=0?'up':'down'"> {{ fuhuanyue}}%</i><i :class="Number(fuhuanyue)>=0?'el-icon-caret-top':'el-icon-caret-bottom'" />
                </p>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <!-- 交易概况 -->
    <div class="shang">
      <div class="shang-top">
        <el-row style="height:32px;line-height:32px">
          <el-col :span="6">
            商品概况
            <i class="ivu-icon ivu-icon-ios-information-circle-outline"></i>
          </el-col>
          <el-col :span="18" align="right">
            <el-item label="投票日期：">
              <el-date-picker
                class="selWidth"
                v-model="timer"
                value-format="yyyy/MM/dd"
                format="yyyy/MM/dd"
                size="small"
                type="daterange"
                placement="bottom-end"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="onchangeTime"
              />
            </el-item>
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="24" class="baseInfo">
        <el-col  class="ivu-mb">
          <el-card :bordered="false" shadow="never" dis-hover :padding="12">
            <div slot="header" class="acea-row row-between-wrapper">
              <i class="iconfont iconyingyee"></i>
            </div>
            <div class="content">
              <span class="content-number spBlock">营业额</span>
              <span class="shang-q">{{shoopInfo.totalPaidMoney}}</span>
              <!-- <div>
                <span class="content-time"
                  >日环增长：
                  <i class="content-is" :class="Number(sales.dayRate)>=0?'up':'down'">{{ sales.dayRate }}%</i><i :class="Number(sales.dayRate)>=0?'el-icon-caret-top':'el-icon-caret-bottom'" />
                </span>
              </div> -->
            </div>
          </el-card>
        </el-col>
        <el-col  class="ivu-mb">
          <el-card :bordered="false" shadow="never" dis-hover :padding="12">
            <div slot="header" class="acea-row row-between-wrapper one">
              <i class="iconfont iconshangpinfangkeshu"></i>
            </div>
            <div class="content">
              <span class="content-number spBlock">总订单数量</span>
              <span class="shang-q">{{shoopInfo.total}}</span>
              <!-- <div>
                <span class="content-time"
                  >日环增长：
                  <i class="content-is" :class="Number(sales.dayRate)>=0?'up':'down'">{{ sales.dayRate }}%</i><i :class="Number(sales.dayRate)>=0?'el-icon-caret-top':'el-icon-caret-bottom'" />
                </span>
              </div> -->
            </div>
          </el-card>
        </el-col>
        <el-col class="ivu-mb">
          <el-card :bordered="false" shadow="never" dis-hover :padding="12">
            <div slot="header" class="acea-row row-between-wrapper two">
              <i class="iconfont iconjiagoujianshu"></i>
            </div>
            <div class="content">
              <span class="content-number spBlock">付款订单数量</span>
              <span class="shang-q">{{shoopInfo.totalPaid}}</span>
              <!-- <div>
                <span class="content-time"
                  >日环增长：
                  <i class="content-is" :class="Number(sales.dayRate)>=0?'up':'down'">{{ sales.dayRate }}%</i><i :class="Number(sales.dayRate)>=0?'el-icon-caret-top':'el-icon-caret-bottom'" />
                </span>
              </div> -->
            </div>
          </el-card>
        </el-col>
        <el-col class="ivu-mb">
          <el-card :bordered="false" shadow="never" dis-hover :padding="12">
            <div slot="header" class="acea-row row-between-wrapper stree">
              <i class="iconfont iconxiadanjianshu"></i>
            </div>
            <div class="content">
              <span class="content-number spBlock">未付款订单数量</span>
              <span class="shang-q">{{shoopInfo.totalUnPaid}}</span>
              <!-- <div>
                <span class="content-time"
                  >日环增长：
                  <i class="content-is" :class="Number(sales.dayRate)>=0?'up':'down'">{{ sales.dayRate }}%</i><i :class="Number(sales.dayRate)>=0?'el-icon-caret-top':'el-icon-caret-bottom'" />
                </span>
              </div> -->
            </div>
          </el-card>
        </el-col>
        <el-col class="ivu-mb">
          <el-card :bordered="false" shadow="never" dis-hover :padding="12">
            <div slot="header" class="acea-row row-between-wrapper four">
              <i class="iconfont iconzhifujianshu"></i>
            </div>
            <div class="content">
              <span class="content-number spBlock">退款金额</span>
              <span class="shang-q">{{shoopInfo.totalRefundMoney}}</span>
              <!-- <div>
                <span class="content-time"
                  >日环增长：
                  <i class="content-is" :class="Number(sales.dayRate)>=0?'up':'down'">{{ sales.dayRate }}%</i><i :class="Number(sales.dayRate)>=0?'el-icon-caret-top':'el-icon-caret-bottom'" />
                </span>
              </div> -->
            </div>
          </el-card>
        </el-col>
        <el-col class="ivu-mb">
          <el-card :bordered="false" shadow="never" dis-hover :padding="12">
            <div slot="header" class="acea-row row-between-wrapper">
              <i class="iconfont iconzhifujine"></i>
            </div>
            <div class="content">
              <span class="content-number spBlock">线下实际付款金额</span>
              <span class="shang-q">{{shoopInfo.totalOfflineMoney}}</span>
              <!-- <div>
                <span class="content-time"
                  >日环增长：
                  <i class="content-is" :class="Number(sales.dayRate)>=0?'up':'down'">{{ sales.dayRate }}%</i><i :class="Number(sales.dayRate)>=0?'el-icon-caret-top':'el-icon-caret-bottom'" />
                </span>
              </div> -->
            </div>
          </el-card>
        </el-col>
        <el-col class="ivu-mb">
          <el-card :bordered="false" shadow="never" dis-hover :padding="12">
            <div slot="header" class="acea-row row-between-wrapper one">
              <i class="iconfont iconchengbenjine"></i>
            </div>
            <div class="content">
              <span class="content-number spBlock">提现金额</span>
              <span class="shang-q">{{shoopInfo.totalWithdrawMoney}}</span>
              <!-- <div>
                <span class="content-time"
                  >日环增长：
                  <i class="content-is" :class="Number(sales.dayRate)>=0?'up':'down'">{{ sales.dayRate }}%</i><i :class="Number(sales.dayRate)>=0?'el-icon-caret-top':'el-icon-caret-bottom'" />
                </span>
              </div> -->
            </div>
          </el-card>
        </el-col>
        <el-col class="ivu-mb">
          <el-card :bordered="false" shadow="never" dis-hover :padding="12">
            <div slot="header" class="acea-row row-between-wrapper two">
              <i class="iconfont icontuikuanjianshu"></i>
            </div>
            <div class="content">
              <span class="content-number spBlock">余额支付金额</span>
              <span class="shang-q">{{shoopInfo.totalBalanceMoney}}</span>
              <!-- <div>
                <span class="content-time"
                  >日环增长：
                  <i class="content-is" :class="Number(sales.dayRate)>=0?'up':'down'">{{ sales.dayRate }}%</i><i :class="Number(sales.dayRate)>=0?'el-icon-caret-top':'el-icon-caret-bottom'" />
                </span>
              </div> -->
            </div>
          </el-card>
        </el-col>
        <!-- <el-col class="ivu-mb">
          <el-card :bordered="false" shadow="never" dis-hover :padding="12">
            <div slot="header" class="acea-row row-between-wrapper">
              <i class="iconfont iconchengbenjine"></i>
            </div>
            <div class="content">
              <span class="content-number spBlock">已支付订单</span>
              <span class="shang-q">{{shoopInfo.totalPaid}}</span>
              <div>
                <span class="content-time"
                  >日环增长：
                  <i class="content-is" :class="Number(sales.dayRate)>=0?'up':'down'">{{ sales.dayRate }}%</i><i :class="Number(sales.dayRate)>=0?'el-icon-caret-top':'el-icon-caret-bottom'" />
                </span>
              </div>
            </div>
          </el-card>
        </el-col> -->
        <!-- <el-col class="ivu-mb">
          <el-card :bordered="false" shadow="never" dis-hover :padding="12">
            <div slot="header" class="acea-row row-between-wrapper one">
              <i class="iconfont iconfangke-zhifuzhuanhuashuai"></i>
            </div>
            <div class="content">
              <span class="content-number spBlock">未支付订单</span>
              <span class="shang-q">{{shoopInfo.totalUnPaid}}</span>
              <div>
                <span class="content-time"
                  >日环增长：
                  <i class="content-is" :class="Number(sales.dayRate)>=0?'up':'down'">{{ sales.dayRate }}%</i><i :class="Number(sales.dayRate)>=0?'el-icon-caret-top':'el-icon-caret-bottom'" />
                </span>
              </div>
            </div>
          </el-card>
        </el-col> -->
      </el-row>
      <echarts-from
        ref="visitChart"
        :yAxisData="yAxisData2"
        :seriesData="series4"
        :xAxis="xAxis4"
        :legendData="legendData4"
      ></echarts-from>
    </div>

  </div>
</template>
<script>
import echartsFrom from "@/components/echarts/index";
import echartsFrom2 from "@/components/echarts/index2";
import { chartjiaoyiList, chartjiaoyiTime } from "@/api/dashboard";
export default {
  components: { echartsFrom,echartsFrom2 },
  data() {
    return {
      leftname: "",
      leftmoney: 0.0,
      info: {},
      legendData: [],
      yAxisData: [],
      yAxisData2:[],
      xAxis: [],
      series: [],
      timer: [],
      startTime: "",
      endTime: "",
      listLoading: false,
      legendData2: [],
      legendData3:[],
      legendData4:[],
      series3: [],
      xAxis2: [],
      xAxis4:[],
      series4:[],
      series2: [],
      rightname:{},
      rightname2:{},
      rightdata:{},
      rightdata2:{},
      dinghuan:0,
      fuhuan:0,
      dinghuanyue:0,
      fuhuanyue:0,
      shoopInfo:{}
    };
  },
  created() {
    this.getshijian();
    this.getList();
    this.getTimer();
  },
  mounted() {
    this.yAxisData = [
      {
        type: "value",
        name: "金额",
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          textStyle: {
            color: "#7F8B9C"
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#F5F7F9"
          }
        }
      }
    ];     
  },
  methods: {
    //获取当日交易记录
    getList() {
      this.legendData = [];
      this.legendData2 = [];
      chartjiaoyiList()
        .then(res => {
          console.log("交易信息", res);
          if (res) {
            this.leftname = res.left.name;
            this.leftmoney = res.left.series[0].money;
            this.rightname=res.right.month[0]
            this.rightname2=res.right.month[1]
            this.rightdata=res.right.today.today[0]
            this.dinghuan=(((this.rightdata.nowNum-this.rightdata.lastNum)/this.rightdata.lastNum)*100).toFixed(2) | 0
            this.dinghuanyue=(((this.rightname.nowNum-this.rightname.lastNum)/this.rightname.lastNum)*100).toFixed(2) | 0
            this.rightdata2=res.right.today.today[1]
            this.fuhuan=(((this.rightdata2.nowNum-this.rightdata2.lastNum)/this.rightdata2.lastNum)*100).toFixed(2) | 0
            this.fuhuanyue=(((this.rightname2.nowNum-this.rightname2.lastNum)/this.rightname2.lastNum)*100).toFixed(2) | 0 
            this.info = res;
            let dataTimeList = [];
            let codeTimeList = [];
            let codeTimeList2=[]
            let codeTimeList3=[]
            for (let key in res.left.series[0].data) {
              dataTimeList.push(Number(res.left.series[0].data[key]));
            }
            for (let key in res.left.x) {
              this.xAxis.push(res.left.x[key]);
            }
            for (let key in res.left.series[1].data) {
              codeTimeList.push(Number(res.left.series[1].data[key]));
            }
            for (let key in res.right.today.today[0].data) {
              codeTimeList2.push(Number(res.right.today.today[0].data[key]));
            }
            for (let key in res.right.today.today[1].data) {
              codeTimeList3.push(Number(res.right.today.today[1].data[key]));
            }
            this.legendData = ["今天", "昨天"];
            this.legendData2 = ["今天"];
            this.legendData3 = ["今天"];
            this.series3=[
                {
                name: "今天",
                type: "line",
                smooth: true,
                itemStyle: {
                  normal: {
                    color: {
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#5b8ff9"
                        },
                        {
                          offset: 0.5,
                          color: "#5b8ff9"
                        },
                        {
                          offset: 1,
                          color: "#5b8ff9"
                        }
                      ]
                    }
                  }
                },

                data: codeTimeList3
              },
            ]
            this.series2=[
                {
                name: "今天",
                type: "line",
                smooth: true,
                itemStyle: {
                  normal: {
                    color: {
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#5b8ff9"
                        },
                        {
                          offset: 0.5,
                          color: "#5b8ff9"
                        },
                        {
                          offset: 1,
                          color: "#5b8ff9"
                        }
                      ]
                    }
                  }
                },

                data: codeTimeList2
              },
            ]
            this.series = [
              {
                name: "今天",
                type: "line",
                smooth: true,
                itemStyle: {
                  normal: {
                    color: {
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#5b8ff9"
                        },
                        {
                          offset: 0.5,
                          color: "#5b8ff9"
                        },
                        {
                          offset: 1,
                          color: "#5b8ff9"
                        }
                      ]
                    }
                  }
                },

                data: dataTimeList
              },
              {
                name: "昨天",
                type: "line",
                smooth: true,
                itemStyle: {
                  normal: {
                    color: {
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#cccccc"
                        },
                        {
                          offset: 0.5,
                          color: "#cccccc"
                        },
                        {
                          offset: 1,
                          color: "#cccccc"
                        }
                      ]
                    }
                  }
                },

                data: codeTimeList
              }
            ];
          }
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    onchangeTime(e) {
      this.startTime = e ? e[0] : "";
      this.endTime = e ? e[1] : "";
      this.getTimer()
    },
    //获取当前查询日期的数据
    getTimer() {
      let parmas = {
        startTime: this.startTime,
        endTime: this.endTime
      };
      this.xAxis4=[]
      this.legendData4=[]
      this.series4=[]
      chartjiaoyiTime(parmas).then(res => {
        console.log("30天数据", res);
        this.shoopInfo=res.dashboard
        let yingye= []
        let zhifu=[]
        let zhichu=[]
        for (let key in res.x) {
              this.xAxis4.push(res.x[key]);
            }
        for (let key in res.series[0].value) {
              yingye.push(res.series[0].value[key]);
            }
        for (let key in res.series[1].value) {
              zhifu.push(res.series[1].value[key]);
            }
        for (let key in res.series[2].value) {
              zhichu.push(res.series[2].value[key]);
            }
        this.legendData4=["营业额","商品支付金额","支出金额"]
            this.series4=[
              {
                name: "营业额",
                type: "line",
                smooth: true,
                itemStyle: {
                  normal: {
                    color: {
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#5b8ff9"
                        },
                        {
                          offset: 0.5,
                          color: "#5b8ff9"
                        },
                        {
                          offset: 1,
                          color: "#5b8ff9"
                        }
                      ]
                    }
                  }
                },
                data: yingye
              },
              {
                name: "商品支付金额",
                type: "line",
                smooth: true,
                itemStyle: {
                  normal: {
                    color: {
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#92e5c4"
                        },
                        {
                          offset: 0.5,
                          color: "#92e5c4"
                        },
                        {
                          offset: 1,
                          color: "#92e5c4"
                        }
                      ]
                    }
                  }
                },
                data: zhifu
              },
              {
                name: "支出金额",
                type: "line",
                smooth: true,
                itemStyle: {
                  normal: {
                    color: {
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#f7464f"
                        },
                        {
                          offset: 0.5,
                          color: "#f7464f"
                        },
                        {
                          offset: 1,
                          color: "#f7464f"
                        }
                      ]
                    }
                  }
                },
                data: zhichu
              },
            ]
      });
    },
    //获取30天
    getshijian() {
      var date1 = new Date();
      var date2 = new Date(date1);

      //-30为30天前，+30可以获得30天后的日期
      date2.setDate(date1.getDate() - 30);

      //30天前（月份判断是否小于10，小于10的前面+0）
      var agoDay = `${date2.getFullYear()}/${
        date2.getMonth() + 1 < 10
          ? `0${date2.getMonth() + 1}`
          : date2.getMonth() + 1
      }/${date2.getDate() < 10 ? `0${date2.getDate()}` : date2.getDate()}`;

      //当前日期
      var nowDay = `${date1.getFullYear()}/${
        date1.getMonth() + 1 < 10
          ? `0${date1.getMonth() + 1}`
          : date1.getMonth() + 1
      }/${date1.getDate() < 10 ? `0${date1.getDate()}` : date1.getDate()}`;

      console.log(`30天前：${agoDay}`);
      console.log(`当前日期：${nowDay}`);
      let start = `${agoDay}`;
      let end = `${nowDay}`;
      console.log(start, end);
      this.timer = [start, end];
      this.startTime = start;
      this.endTime = end;
    }
  }
};
</script>
<style scoped lang="scss">
.jiaoyi {
  padding: 20px;
  background-color: #fff;
}
.ivu-mb {
  width: 25%;
  margin-bottom: 10px;
  display: flex;
}
.up,
.el-icon-caret-top {
  color: #f5222d;
  font-size: 12px;
  opacity: 1 !important;
}

.down,
.el-icon-caret-bottom {
  color: #39c15b;
  font-size: 12px;
  /*opacity: 100% !important;*/
}

.baseInfo {
   .el-card {
    display: flex;
    width: 100%;
    // margin-bottom: 30px;
    border: none;
  }
   .el-card__header {
    padding: 15px 10px !important;
    border: none;
  }
   .el-card__body {
    width: 70%;
    font-size: 15px;
    padding: 15px 20px 15px 5px !important;
  }
}

.content {
  &-number {
    font-size: 30px;
  }
  &-time {
    font-size: 16px;
    /*color: #8C8C8C;*/
  }
}
.acea-row {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  text-align: center;
  line-height: 32px;
  opacity: 0.7;
  background-color: #1890ff;
  justify-content: center;
}
.one {
  background-color: #00c050;
}
.two {
  background-color: #ffab2b;
}
.stree {
  background-color: #b37feb;
}
.four{
  background-color: #ff1872;
}
.iconfont {
  color: #fff;
}
.content-number {
  font-size: 12px;
}
.shang {
  padding: 20px;
  background-color: #fff;
  margin: 20px 0;
}
.shang-top {
  padding: 10px;
  font-size: 16px;
}
.shang-q {
  font-size: 30px;
  margin: 10px 0;
  display: inline-block;
}
</style>
<style>
  .el-card__header{
  border: none ;
}
</style>